<template>
  <div class="pedia">
    <div class="breadcrumbs">
      当前位置：首页 > 百科 > {{curNav.title}}
    </div>
    <div class="content-wrap">
      <div class="left">
        <left-nav
          :navList="navList"
          @switchNav="switchNav"
        ></left-nav>
        <pedia-content
          :nav="curNav"
          :showList="showList"
          :hotEntry="hotEntry"
          :newEntry="newEntry"
          :entryList="entryLists"
          :recommendList="recommendList"
          @showList="showListFn"
        ></pedia-content>
      </div>
      <div class="right">
        <div class="create-pedia" @click="dialogVisible = true">
          <img :src="`${$baseImgUrl}pedia/create_pedia.jpg`">
        </div>
        <pedia-notice :list="noticeList"></pedia-notice>
      </div>
    </div>
    <create-pedia
      v-if="dialogVisible"
      @close="dialogClose"
    ></create-pedia>
  </div>
</template>

<script>
import LeftNav from './components/LeftNav.vue';
import PediaContent from './components/Content.vue';
import PediaNotice from './components/Notice.vue';
import CreatePedia from './components/CreatePedia.vue';

export default {
  name: 'Pedia',
  components: {
    LeftNav,
    PediaContent,
    PediaNotice,
    CreatePedia
  },
  data() {
    return {
      curNav: null,
      navList: [
        { id: 0, key: 'all', title: '全部百科' },
        { id: 1, title: '博彩名词' },
        { id: 2, title: '博彩企业' },
        { id: 3, title: '博彩游戏' },
        { id: 4, title: '博彩责任' },
        { id: 5, title: '博彩担保' },
        { id: 6, title: '俱乐部' }
      ],
      hotEntry: [
        { title: '娱乐场博彩或投注信贷法律制度', url: '' },
        { title: '博彩牌照', url: '' },
        { title: 'BBIN', url: '' },
        { title: '骰宝', url: '' },
        { title: 'Playtech（PT）', url: '' },
        { title: '龙虎斗', url: '' },
        { title: '轮盘', url: '' },
        { title: '大西洋城', url: '' },
        { title: '三公', url: '' },
        { title: '越南涂山赌场', url: '' }
      ],
      newEntry: [
        { title: '娱乐场博彩或投注信贷法律制度', url: '' },
        { title: '博彩牌照', url: '' },
        { title: 'BBIN', url: '' },
        { title: '骰宝', url: '' },
        { title: 'Playtech（PT）', url: '' },
        { title: '龙虎斗', url: '' },
        { title: '轮盘', url: '' },
        { title: '大西洋城', url: '' },
        { title: '三公', url: '' },
        { title: '越南涂山赌场', url: '' }
      ],
      entryList: [
        { title: '娱乐场博彩或投注信贷法律制度', url: '', date: '2020-06-06 09:44:23' },
        { title: '博彩牌照', url: '', date: '2020-06-06 09:44:23' },
        { title: 'BBIN', url: '', date: '2020-06-06 09:44:23' },
        { title: '骰宝', url: '', date: '2020-06-06 09:44:23' },
        { title: 'Playtech（PT）', url: '', date: '2020-06-06 09:44:23' },
        { title: '龙虎斗', url: '', date: '2020-06-06 09:44:23' },
        { title: '轮盘', url: '', date: '2020-06-06 09:44:23' },
        { title: '大西洋城', url: '', date: '2020-06-06 09:44:23' },
        { title: '三公', url: '', date: '2020-06-06 09:44:23' },
        { title: '越南涂山赌场', url: '', date: '2020-06-06 09:44:23' }
      ],
      recommendList: [
        { img: 'home/warrant01.png', name: 'bet365' }
      ],
      noticeList: [
        { title: ' 火博网新版上线，并隆重推出第三个啥啥啥', url: '' },
        { title: ' 火博网新版上线，并隆重推出第三个啥啥啥', url: '' },
        { title: ' 火博网新版上线，并隆重推出第三个啥啥啥', url: '' },
        { title: ' 火博网新版上线，并隆重推出第三个啥啥啥', url: '' },
        { title: ' 火博网新版上线，并隆重推出第三个啥啥啥', url: '' }
      ],
      dialogVisible: false,
      showList: true
    };
  },
  created() {
    [this.curNav] = this.navList;
    this.getData();
  },
  computed: {
    entryLists() {
      return this.entryList.map(entry => {
        entry.suffix = this.curNav.title;
        return entry;
      });
    }
  },
  methods: {
    getData() {
      this.$api.getBkType().then(data => {
        this.data = data;
      });
    },
    switchNav(nav) {
      this.showList = true;
      if (this.curNav === nav) {
        return;
      }
      this.curNav = nav;
    },
    dialogClose() {
      this.dialogVisible = false;
    },
    showListFn(value) {
      this.showList = value;
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../less/global.less';
  .pedia {
    background-color: #fff;
    .breadcrumbs {
      margin-bottom: 10px;
      padding-left: 10px;
      height: 40px;
      line-height: 40px;
      background-color: @mainBgColor;
      color: #fff;
    }
    .content-wrap {
      display: flex;
      .left {
        display: flex;
        flex: 1;
      }
      .right {
        flex: 0 0 260px;
        width: 260px;
        .create-pedia {
          cursor: pointer;
          img {
            width: 100%;
          }
        }
      }
    }
  }
</style>
